<script>
/*ETL数据  */
export default {
  name: 'EtlData',
  data() {
    return {
      dialog: false,
      schemeName: '',
      etlDataConfig: null,
      myDataHeight: 620,
      etlHeight: {
        height: '150px',
      },
      tablePageIndex: 1,
      tablePageSize: 10,
      totalCount: 10,
      testResult: '',
      columns: [
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'cube',
                },
              }),
              h('strong', { style: { 'margin-left': '8px' } }, params.row.name),
            ]);
          },
        },
        {
          title: '类型',
          key: 'type',
        },
        {
          title: '修改时间',
          key: 'updatetime',
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    },
                  },
                },
                '删除'
              ),
            ]);
          },
        },
      ],
      etlData: [],
    };
  },
  watch: {},
  mounted() {
    this.loadETLList();
  },
  methods: {
    /*加载ETL数据源列表**/
    loadETLList() {},
    /*删除方案*/
    remove(index) {},
    /*测试执行结果*/
    connectTest() {},
    /*etl数据源选择*/
    etlSelect(data) {},
    changePage(pageIndex) {},
    /*保存方案*/
    saveScheme() {},
    /*重置表单*/
    formReset() {
      this.schemeName = '';
    },
    formatDate(t) {
      return new Date(t).toLocaleString().replace(/:\d{1,2}$/, ' ');
    },
  },
};
</script>
<template>
  <div
    :style="{height:myDataHeight + 'px'}"
    class="etlPanel"
    style="background-color: #eee;overflow:hidden;"
  >
    <div
      :style="{height:myDataHeight - 40 + 'px'}"
      style="overflow:hidden;"
    >
      <div class="operation">
        <Button
          type="primary"
          icon="plus"
          style="background-color: #0fc5c4;border:0;"
          @click="dialog = true"
        >新建</Button>
      </div>
      <Table
        :columns="columns"
        :data="etlData"
        stripe
        border
        style="margin:0 10px;width:100%;"
      />
    </div>
    <div style="position:absolute;bottom:155px;right:35px;height:40px;line-height:40px;">
      <Page
        :total="totalCount"
        :current="1"
        class-name="pageStyle"
        @on-change="changePage"
      />
    </div>
    <Modal
      v-model="dialog"
      :styles="{top: '20px'}"
      width="460px"
      title="新建ETL数据源"
      @on-cancel="formReset"
    >
      <Row style="margin-top:5px;">
        <Col span="4">
        <span class="property-label">方案名：</span>
          </Col>
        <Col span="20">
        <Input v-model="schemeName"></Input>
          </Col>
      </Row>
      <Row style="margin-top:5px;">
        <Col span="4">
        <span class="property-label">方&nbsp;&nbsp;&nbsp;&nbsp;案：</span>
          </Col>
        <Col span="20">
          </Col>
      </Row>
      <Row style="margin-top:5px;">
        <Col span="4">
        <span class="property-label">测&nbsp;&nbsp;&nbsp;&nbsp;试：</span>
          </Col>
        <Col span="20">
        <Input
          v-model="testResult"
          :autosize="{minRows:3, maxRows: 3}"
          type="textarea"
        />
          </Col>
      </Row>
      <div slot="footer">
        <Button
          type="ghost"
          @click="connectTest"
        >执行</Button>
        <Button
          type="primary"
          @click="saveScheme"
        >确定</Button>
      </div>
    </Modal>
  </div>
</template>
<style scoped lang='less'>
.operation {
  text-align: left;
  width: 72px;
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}

.schemeTree {
  height: 260px;
  min-height: 260px;
}

.etlPanel .pageStyle {
  .k-page-item-active {
    background-color: #0fc5c4;
    border-color: #0fc5c4;
  }
  .k-page-prev:hover,
  .k-page-next:hover,
  .k-page-item:hover {
    border-color: #0fc5c4;
  }
}
</style>
